<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <view class="top-block">
          <mt-navbar title="我的产品"> </mt-navbar>
          <view class="top-search bg-#ffffff">
            <uv-search v-model="productName" placeholder="搜索你想找的产品" :show-action="false" :clearabled="true" @change="handleInput"></uv-search>
          </view>
          <view class="drop-box">
            <view class="custom-drop h-44px">
              <uv-tabs
                v-if="showTabs"
                :list="tabList"
                :current="currentTab"
                :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
                :inactive-style="{ color: '#727687' }"
                line-width="32"
                line-color="#1484EE"
                @click="tabsChange"
              ></uv-tabs>
            </view>
            <view class="flex items-center px-16rpx" style="box-shadow: 0rpx 0rpx 44rpx 0rpx rgba(0, 0, 0, 0.15)" @click="handleOpenCategory">
              <text class="text-28rpx text-#1C213E mr-4rpx">筛选</text>
              <uv-icon name="arrow-down-fill" color="#727687" size="20rpx"></uv-icon>
            </view>
          </view>
        </view>
      </template>
      <view class="px-32rpx pt-16rpx">
        <view v-for="item in dataList" :key="item.id" class="list-li bg-#ffffff mb-24rpx px-32rpx py-32rpx rd-8rpx">
          <view class="flex items-center">
            <view class="flex-1 min-w-0 mr-20rpx">
              <view class="text-32rpx text-#1A1A1A break-all font-bold mb-8rpx">{{ item.productName }}</view>
              <view class="text-28rpx text-#EFB339 break-all font-bold">{{ item.brokerageRule }}</view>
            </view>
            <view v-if="item.productStatus === 0" class="status-tag text-#007BFF bg-[rgba(20,132,238,0.1)]">在审</view>
            <view v-if="item.productStatus === 1" class="status-tag text-#28B094 bg-[rgba(40,176,148,0.1)]">在售</view>
            <view v-if="item.productStatus === 2" class="status-tag text-#727687 bg-[rgba(173,176,189,0.1)]">下架</view>
            <view v-if="item.productStatus === 3" class="status-tag text-#F94B4A bg-[rgba(249,75,74,0.1)]">驳回</view>
          </view>

          <view class="mt-24rpx flex bg-#F5F5F5 p-16rpx">
            <view class="w-132rpx text-right text-24rpx text-#727687">所属分类：</view>
            <view class="flex-1 min-w-0 text-24rpx text-#727687 break-all">{{ item.productCategoryParentName }}</view>
          </view>

          <view class="mt-24rpx text-28rpx text-#666666 clamp2"> {{ item.remark }} </view>
          <view v-if="item.productStatus !== 0" class="text-right mt-32rpx">
            <mt-button
              v-if="item.productStatus === 2"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              :times="500"
              @click="handlePutList(item)"
              >上架</mt-button
            >
            <mt-button
              v-if="item.productStatus === 1"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              :times="500"
              @click="handleOutList(item)"
              >下架</mt-button
            >
            <mt-button
              v-if="item.productStatus === 3"
              class="apply-btn"
              type="info"
              shape="circle"
              size="mini"
              :shake="false"
              @click="handleJoinProduct(item)"
              >再次申请</mt-button
            >
          </view>
        </view>
      </view>
    </z-paging>

    <mt-more-column-checkbox
      ref="categoryRef"
      v-model="category"
      label="productCategoryName"
      :list="categoryArr"
      @confirm="handleCategoryConfirm"
    ></mt-more-column-checkbox>
    <mt-modal ref="modalRef"></mt-modal>
  </view>
</template>

<script setup>
import { productCategorygetProductCategoryTreeApp } from '@/api/mixed';
import {
  providerProductgetProviderProductPageApp,
  providerProductApplygetProviderProductApplyRecordPageApp,
  providerProductupdateProviderProductStatusApp,
  providerProductgetProviderProductCount
} from '@/subProduct/api/index';
import { debounce } from '@/utils/tools';
const productName = ref('');

const tabList = ref([
  // {
  //   name: '在审',
  //   type: 0,
  //   badge: {
  //     value: 0,
  //     bgColor: 'transparent',
  //     color: '#727687'
  //   }
  // },
  {
    name: '在售',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '下架',
    type: 2,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
  // {
  //   name: '驳回',
  //   type: 3,
  //   badge: {
  //     value: 0,
  //     bgColor: 'transparent',
  //     color: '#727687'
  //   }
  // }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  getNum();
  pagingRef.value.reload();
}

function handleJoinProduct(row) {
  uni.setStorageSync('product', {
    productCategoryParentId: row.productCategoryParentId,
    productCategoryParentName: row.productCategoryParentName,
    productCategoryId: row.productCategoryId,
    productCategoryName: row.productCategoryName,
    productName: row.productName
  });
  uni.navigateTo({
    url: `/subProduct/pages/join?type=2&id=${row.id}&productId=${row.productId}`
  });
}

const categoryRef = ref();
function handleOpenCategory() {
  categoryRef.value.open();
}

const categoryArr = ref([]);
const category = ref([]);
function handleCategoryConfirm() {
  getNum();
  pagingRef.value.reload();
}

function getSelect() {
  productCategorygetProductCategoryTreeApp().then((res) => {
    categoryArr.value = res.data;
  });
}

const modalRef = ref();
function handlePutList(row) {
  modalRef.value.open({
    title: '上架提醒',
    content: '是否上架此产品',
    contentAlign: 'center',
    success: (e) => {
      if (e.confirm) {
        handleChangeStatus(row.id, 1);
      }
    }
  });
}
function handleOutList(row) {
  modalRef.value.open({
    title: '下架提醒',
    content: '是否下架此产品',
    contentAlign: 'center',
    success: (e) => {
      if (e.confirm) {
        handleChangeStatus(row.id, 2);
      }
    }
  });
}

function handleChangeStatus(id, productStatus) {
  providerProductupdateProviderProductStatusApp({
    id,
    productStatus
  }).then(() => {
    uni.showToast({
      icon: 'none',
      title: '操作成功'
    });
    getNum();
    pagingRef.value.reload();
  });
}

const handleInput = debounce(function () {
  getNum();
  pagingRef.value.reload();
});

const showTabs = ref(true);
function getNum() {
  showTabs.value = false;
  providerProductgetProviderProductCount({
    productName: productName.value,
    parentProductCategoryIdList: category.value
  }).then((res) => {
    tabList.value.map((i) => {
      res.data.map((x) => {
        if (i.type == x.productStatus) {
          i.badge.value = x.productStatusCount;
        }
      });
    });
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      productName: productName.value,
      parentProductCategoryIdList: category.value,
      productStatus: tabList.value[currentTab.value].type
    };
    let res = null;
    if ([1, 2].includes(params.productStatus)) {
      res = await providerProductgetProviderProductPageApp(params);
    } else if ([0, 3].includes(params.productStatus)) {
      res = await providerProductApplygetProviderProductApplyRecordPageApp(params);
    }
    lastId.value = res.data?.items[res.data?.items.length - 1]?.id;
    pagingRef.value.complete(res.data.items);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onShow(() => {
  getNum();
  nextTick(() => {
    pagingRef.value.refresh();
  });
});

onLoad(() => {
  getSelect();
});
</script>

<style lang="scss" scoped>
.top-search {
  position: relative;
  z-index: 2;
  padding: 12rpx 32rpx;
  :deep(.uv-search__content) {
    background-color: #f5f5f5 !important;
  }
  :deep(.uv-search__content__input) {
    background-color: #f5f5f5 !important;
  }
}
.drop-box {
  position: relative;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
  .custom-drop {
    flex: 1;
    min-width: 0;
  }
}
.list-li {
  position: relative;
  .status-tag {
    width: 116rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 4rpx;
  }

  .apply-btn.mt-button {
    min-width: 160rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    padding: 16rpx 24rpx;
  }
}
</style>
